<template>
  <div>
    <h1>ref</h1>
    <ul>
      <li ref="li">这是第一个li元素</li>
    </ul>
    <son ref="SSon"></son>
    <button @click="soninfo">获取子组件上的数据</button>
    <ul>
      <li :ref="getList" v-for="index in 10" :key="index">这是第{{index}}个li元素</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent ,ref} from 'vue'
import Son from './components/Son.vue';

export default defineComponent({
  components:{Son},
  setup () {
    const li = ref<HTMLElement | null>();//DOM元素的数据类型就是HTMLELement 这里的意思是ref的类型要么是HTMLElement要么是null，null就代表没获取到
    console.log(li);//是一个ref对象
    // ref获取子组件 进行子向父传值 组件指定的数据类型：<InstanceType<typeof 子组件>>
    const SSon = ref<InstanceType<typeof Son>>();
    console.log(SSon);
    const soninfo = ()=>{
      console.log(SSon.value?.info);
    };
    const getDom:HTMLElement[] = [];
    const getList = (el:HTMLElement)=>{
      getDom.push(el);
    };
    console.log(getDom);
    return {
      li,
      soninfo,
      SSon,
      getList
    }
  }
})
</script>

<style scoped>

</style>